import React, { useState } from "react";
import "./Lable.css";
import { Tabs } from "@nutui/nutui-react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
export default function Lable() {
  const data = [
    {
      id: 1,
      name: "星座",
      children: [
        { id: 111, name: "白羊座" },
        { id: 112, name: "金牛座" },
        { id: 113, name: "双子座" },
        { id: 114, name: "巨蟹座" },
        { id: 115, name: "狮子座" },
        { id: 116, name: "处女座" },
        { id: 117, name: "天秤座" },
        { id: 118, name: "天蝎座" },
        { id: 119, name: "射手座" },
        { id: 120, name: "摩羯座" },
        { id: 121, name: "水瓶座" },
        { id: 122, name: "双鱼座" },
      ],
    },
    {
      id: 2,
      name: "年龄",
      children: [
        { id: 211, name: "18-24岁" },
        { id: 212, name: "25-30岁" },
        { id: 213, name: "31-40岁" },
        { id: 214, name: "41-50岁" },
        { id: 215, name: "50岁以上" },
      ],
    },
    {
      id: 3,
      name: "兴趣",
      children: [
        { id: 311, name: "旅游" },
        { id: 312, name: "美食" },
        { id: 313, name: "运动" },
        { id: 314, name: "阅读" },
        { id: 315, name: "电影" },
      ],
    },
    {
      id: 4,
      name: "特质",
      children: [
        { id: 411, name: "乐观" },
        { id: 412, name: "细心" },
        { id: 413, name: "外向" },
        { id: 414, name: "幽默" },
        { id: 415, name: "坚韧" },
      ],
    },
  ];

  const navigate = useNavigate();
  const [tab1value, setTab1value] = useState("0");
  const [selectedLabels, setSelectedLabels] = useState(new Set()); // 用 Set 存储选中的星座名称

  const handleLabelClick = (labelName) => {
    setSelectedLabels((prevSelected) => {
      const newSet = new Set(prevSelected);
      if (newSet.has(labelName)) {
        newSet.delete(labelName); // 如果已选中，删除
      } else {
        newSet.add(labelName); // 如果未选中，添加
      }
      return newSet;
    });
  };

  const handleDelete = (labelName) => {
    setSelectedLabels((prevSelected) => {
      const newSet = new Set(prevSelected);
      newSet.delete(labelName); // 删除选中的星座名称
      return newSet;
    });
  };

  const handleOk = async () => {
    // 将 Set 转换为数组
    const labelsArray = Array.from(selectedLabels);
    // 将数组转换为以逗号分隔的字符串
    const labelsString = labelsArray.join(",");
    console.log(labelsString); // 打印转换后的字符串
    try {
      const res = await axios.put("http://127.0.0.1:8000/switch_lable", {
        labelsString,
      });
    if(res.data.code===200){
        navigate("/my")
    }
      // console.log(res.data.data); // 确认返回的数据
    } catch (e) {
      console.log("我的..添加标签失败！" + e);
    }

    // 使用 navigate 将选中的星座名称传递给 URL
    // navigate(`/my?labels=${labelsString}`);
  };

  return (
    <div className="lable">
      <div className="lable-top">
        <span className="lable-top-one" onClick={() => navigate("/my")}>
          <svg
            t="1733148115622"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4271"
            width="16"
            height="16"
          >
            <path
              d="M665.6 1011.2 716.8 972.8 345.6 512 716.8 51.2 665.6 12.8 262.4 512Z"
              fill="#272636"
              p-id="4272"
            ></path>
          </svg>
        </span>

        <span className="lable-top-two">添加标签</span>
        <span className="lable-top-three" onClick={handleOk}>
          完成
        </span>
      </div>
      <div className="lable-my">
        <h1 style={{ margin: "10px" }}>我的标签</h1>
        <div className="selected-tags">
          {/* 显示已选标签 */}
          {[...selectedLabels].map((labelName) => (
            <span key={labelName} className="selected-tag">
              {labelName}
              <button
                className="delete-btn"
                onClick={() => handleDelete(labelName)}
              >
                ×
              </button>
            </span>
          ))}
        </div>
      </div>
      <div className="lable_add">
        <h1 style={{ marginBottom: "10px" }}>添加标签</h1>
        <Tabs
          value={tab1value}
          onChange={(value) => {
            setTab1value(value);
          }}
        >
          {data.map((category) => (
            <Tabs.TabPane key={category.id} title={category.name}>
              <div className="category-items">
                {category.children.map((child) => (
                  <div
                    key={child.id}
                    className={`category-item ${
                      selectedLabels.has(child.name) ? "selected" : ""
                    }`}
                    onClick={() => handleLabelClick(child.name)} // 使用星座名称
                  >
                    <span>{child.name}</span>
                  </div>
                ))}
              </div>
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>
    </div>
  );
}
